<div class="help-dialog">
    <div class="content">
        <h1>Table of Contents</h1>

        <ul class="toc">
            <li><a href="#"></a></li>
            <li (click)="scrollTo('about')">About</li>
            <li>
                <span (click)="scrollTo('help_Layers')">Layers</span>
                <ul>
                    <li (click)="scrollTo('help_Creating_New_Layers')">Creating New Layers</li>
                    <li (click)="scrollTo('help_Saving_and_Loading_Layers')">Saving and Loading Layers</li>
                    <li (click)="scrollTo('help_Creating_Layers_from_Other_Layers')">Creating Layers from Other Layers</li>
                </ul>
            </li>
            <li>
                <span (click)="scrollTo('help_Layer_Controls')">Layer Controls</span>
                <ul>
                    <li (click)="scrollTo('help_Layer_Information')">Layer Information</li>
                    <li (click)="scrollTo('help_Sorting')">Sorting</li>
                    <li (click)="scrollTo('help_Filtering')">Filtering</li>
                    <li>
                        <span (click)="scrollTo('help_Color_Setup')">Color Setup</span>
                        <ul>
                            <li (click)="scrollTo('help_Tactic_Row_Background')">Tactic Row Background</li>
                            <li (click)="scrollTo('help_Scoring_Gradient')">Scoring Gradient</li>
                        </ul>
                    </li>
                    <li (click)="scrollTo('help_Hiding_Disabled_Techniques')">Hiding Disabled Techniques</li>
                    <li (click)="scrollTo('help_Show_Hide_Subtechniques')">Showing or Hiding Sub-techniques</li>
                    <li>
                        <span (click)="scrollTo('help_Changing_Layout')">Configuring the Matrix</span>
                        <ul>
                            <li (click)="scrollTo('help_Side_Layout')">Side Layout</li>
                            <li (click)="scrollTo('help_Flat_Layout')">Flat Layout</li>
                            <li (click)="scrollTo('help_Mini_Layout')">Mini Layout</li>
                            <li (click)="scrollTo('help_IDs_Names')">Showing IDs and Names</li>
                            <li>
                              <span (click)="scrollTo('help_Aggregate_Scores')">Aggregate Scores</span>
                              <ul>
                                <li (click)="scrollTo('help_Show_Hide_Aggregate')">Showing or Hiding Aggregate Scores</li>
                                <li (click)="scrollTo('help_Count_Unscored')">Counting Unscored Techniques</li>
                                <li (click)="scrollTo('help_Choose_Aggregate')">Choosing an Aggregate Function</li>
                              </ul>
                            </li>
                        </ul>
                    </li>
                    <li (click)="scrollTo('help_Legend')">Legend</li>
                </ul>
            </li>
            <li>
                <span (click)="scrollTo('help_Technique_Controls')">Technique Controls</span>
                <ul>
                    <li (click)="scrollTo('help_Disabling_Techniques')">Disabling Techniques</li>
                    <li (click)="scrollTo('help_Assigning_Manual_Colors')">Assigning Manual Colors</li>
                    <li (click)="scrollTo('help_Scoring_Techniques')">Scoring Techniques</li>
                    <li (click)="scrollTo('help_Adding_Comments_to_Techniques')">Adding Comments to Techniques</li>
                    <li (click)="scrollTo('help_Clearing_Selected_Techniques_Annotations')">Clearing Annotations on Techniques</li>
                </ul>
            </li>
            <li>
                <span (click)="scrollTo('help_Selecting_Techniques')">Selecting Techniques</span>
                <ul>
                    <li (click)="scrollTo('help_Selecting_with_the_Mouse')">Selecting with the Mouse</li>
                    <li (click)="scrollTo('help_Selection_Behavior')">Selection Behavior</li>
                    <li (click)="scrollTo('help_Search_Interface')">Search Interface</li>
                    <li (click)="scrollTo('help_Multiselct_Interface')">Multiselect Interface</li>
                </ul>
            </li>
            <li>
                <span (click)="scrollTo('help_Customizing_The_Navigator')">Customizing The Navigator</span>
                <ul>
                    <li (click)="scrollTo('help_Default_Layers')">Default Layers</li>
                    <li (click)="scrollTo('help_Disable_Features')">Disabling Features</li>
                </ul>
            </li>
            <li>
                <span (click)="scrollTo('help_Rendering_Layers_As_SVG')">Rendering Layers as SVG</span>
                <ul>
                    <li (click)="scrollTo('help_exporting_units')">Measurement Units</li>
                    <li (click)="scrollTo('help_exporting_image_size')">Configuring Image Size</li>
                    <li (click)="scrollTo('help_exporting_text')">Configuring Text</li>
                    <li (click)="scrollTo('help_exporting_legend_config')">Customizing the Legend</li>
                    <li (click)="scrollTo('help_exporting_display_settings')">Display Settings</li>
                </ul>
            </li>
            <li (click)="scrollTo('help_Rendering_Layers_As_XLSX')">Exporting Layers to MS Excel</li>
            <li (click)="scrollTo('notice')">Notice</li>
        </ul>

        <h1 id="about"> MITRE ATT&CK® Navigator Version {{nav_version}}</h1>
        <p>
            The ATT&CK Navigator is designed to provide basic navigation and
            annotation of ATT&CK matrices, something that people are already doing
            today in tools like Excel. We've designed it to be simple and generic -
            you can use the Navigator to visualize your defensive coverage, your
            red/blue team planning, the frequency of detected techniques or anything
            else you want to do. The Navigator doesn't care - it just allows you to
            manipulate the cells in the matrix (color coding, adding a comment,
            assigning a numerical value, etc.). We thought having a simple tool that
            everyone could use to visualize the matrix would help make it easy to
            use ATT&CK.
        </p>
        <p>
            The principal feature of the Navigator is the ability for users to
            define layers - custom views of the ATT&CK knowledge base - e.g. showing
            just those techniques for a particular platform or highlighting
            techniques a specific adversary has been known to use. Layers can be
            created interactively within the Navigator or generated programmatically
            and then visualized via the Navigator.
        </p>
        <p>
            Bug reports and feature requests can be submitted to our <a href="https://github.com/mitre-attack/attack-navigator/issues">GitHub Issue Tracker</a>.
            The source code for the ATT&CK Navigator can be retrieved from our
            <a href="https://github.com/mitre-attack/attack-navigator">GitHub repository</a>.
        </p>


        <!-- sections -->
        <h1 id="help_Layers">Layers</h1>
        <p>
        A layer constitutes a view of the tactics and techniques matrix for a
        specific technology domain. Version {{nav_version}} of the Navigator can manipulate
        either the Enterprise, Mobile, or ICS
        ATT&CK technology domain knowledge bases. Within a technology domain, the
        Navigator allows you to filter your view of the matrix in a variety of
        ways, displaying the tactics and techniques that are important to you.
        </p>
        <p>
        You can view the definition of any technique in the visible matrix by
        right-clicking on the technique and selecting "view technique" in the
        pop-up menu. A new browser tab will be opened displaying the definition of
        the technique. In this way the Navigator allows you to explore a given
        ATT&CK matrix and access the definitions of the techniques.
        </p>
        <p>
        Beyond the filters, layers also provide a means to customize your view of
        the matrix. To that end you can
        <span class="section-link" (click)="scrollTo('help_Assigning_Manual_Colors')">color</span>,
        <span class="section-link" (click)="scrollTo('help_Hiding_Disabled_Techniques')">hide</span>,
        <span class="section-link" (click)="scrollTo('help_Adding_Comments_to_Techniques')">comment</span>,
        and assign <span class="section-link" (click)="scrollTo('help_Scoring_Techniques')">numeric scores</span>
        to techniques to aid in analysis of threats and your defenses
        against those threats. As stated earlier, the Navigator is designed to be
        simple, allowing you to assign whatever meaning you want to the
        color-codings, scores, and comments. This way the Navigator can support
        whatever you want to do without requiring changes to the Navigator code
        itself.
        </p>
        <p>
        Each layer created is independent of other layers. However, layers can be
        <span class="section-link" (click)="scrollTo('help_Creating_Layers_from_Other_Layers')">combined</span>
        in ways to support analysis, or
        <span class="section-link" (click)="scrollTo('help_Saving_and_Loading_Layers')">saved locally</span>. Layer files are
        saved in easy to parse and easy to generate JSON file so that ATT&CK data
        can be used in other applications, analyzed beyond the capability of the
        ATT&CK Navigator, and generated by tools for import into the Navigator.
        The Layer file format is described <a href="assets/NavigatorLayerFileFormatv4_1.pdf">here</a>.
        </p>


        <h2 id="help_Creating_New_Layers">Creating New Layers</h2>
        <p>
            To create a new layer, open a new tab and click the "Create New Layer" dropdown.
            The quick access buttons will create a layer with the current version of ATT&CK.
            Past versions of ATT&CK compatible with the Navigator are accessible in the
            "More Options" dropdown. This interface allows you to specify the desired version
            and domain for the new layer. Note that for performance reasons, the Navigator
            currently imposes a limit of ten (10) active layers at any given point in time.
        </p>
        <h2 id="help_Saving_and_Loading_Layers">Saving and Loading Layers</h2>
        <p>
            Layers can be saved by clicking the "save layer" button (<img src="assets/icons/ic_file_download_black_24px.svg">). This will open a dialog
            to save a layer configuration file to your local computer. This contains
            the configuration for the techniques that have been customized
            (commented, colored, assigned a score, or disabled) as well as the
            scoring gradient setup, filter selection, layer name, layer description,
            view configuration.
        </p>
        <p>
            Saved layer configuration files can be opened in the ATT&CK Navigator to
            restore a layer you've worked on previously. To do so, open a new tab
            and open the "Open Existing Layer" panel. Then click "Upload from
            local", and select your saved configuration file. Doing so will restore
            your saved layer to the ATT&CK Navigator. This interface also has a "load from URL"
            input allowing you to open a layer json from a remote source.
        </p>
        <h2 id="help_Creating_Layers_from_Other_Layers">Creating Layers from Other Layers</h2>
        <p>
            Layers can be created which inherit properties from other layers. Several fields
            exist which can be used to choose which layers to inherit properties from:
        </p>
        <ul>
            <li>
                <p>
                    <b>Domain:</b> choose the domain and version for the new layer. Layers can only inherit
                    properties from other layers of the same domain and version.
                </p>
            </li>
            <li>
                <p>
                    <b>Score Expression:</b> Technique
                    <span class="section-link" (click)="scrollTo('help_Scoring_Techniques')">scores</span> in the created layer are
                    initialized to the result of this expression. This field should take
                    the form of an equation or constant, using variables for layers.
                    Layer variables are shown in yellow on tabs when the "create layer
                    from other layers" panel is opened:
                </p>
                <img src="assets/image_scoreVariableExample.png" height="100px">
                <p>
                    Each technique's score is created independently using the score expression. For example,
                    with a score expression of <code>a+b</code>, some technique <i>t</i> in the output layer would
                    be the sum of <i>t<sub>a</sub></i> and <i>t<sub>b</sub></i>.
                </p>
                <p>
                    Expressions can also be comparative, for example <code>a>b</code>
                    will create a layer with a score of 1 whereever <code>a>b</code> and
                    0 whereever <code>a<=b</code>. Such boolean expressions can be
                    extended using <code>and</code>, <code>or</code>, <code>xor</code>
                    and <code>not</code>. You can also use ternary expressions such as <code>a > b ? 25 : 10</code>
                    See <a href="http://mathjs.org/docs/expressions/syntax.html#operators">
                        this page</a> for a full list of operators.
                    </p>
                    Some example score expressions:
                    <ul>
                        <li>
                            <code>(a+b)/2</code> (average two layers)
                        </li>
                        <li>
                            <code>a+b+c</code>
                        </li>
                        <li>
                            <code>a*(b+c)</code>
                        </li>
                        <li>
                            <code>100-a</code> (reverse the scoring of <code>a</code>, assuming <code>a</code> is on a 0-100 scale)
                        </li>
                        <li>
                            <code>(a>b) and (a>=75)</code>
                        </li>
                    </ul>
                </li>
                <li>
                    <b>Gradient:</b> choose which layer to inherit <span class="section-link" (click)="scrollTo('help_Scoring_Gradient')">scoring gradient</span> from.
                </li>
                <li>
                    <b>Coloring:</b> choose which layer to inherit <span class="section-link" (click)="scrollTo('help_Assigning_Manual_Colors')">manually assigned technique colors</span> from.
                </li>
                <li>
                    <b>Comments:</b> choose which layer to inherit <span class="section-link" (click)="scrollTo('help_Adding_Comments_to_Techniques')">technique comments</span> from.
                </li>
                <li>
                    <b>States:</b> choose which layer to inherit technique <span class="section-link" (click)="scrollTo('help_Disabling_Techniques')">enabled/disabled states</span> from.
                </li>
                <li>
                    <b>Filters:</b> choose which layer to inherit <span class="section-link" (click)="scrollTo('help_Filtering')">layer filter configuration</span> from.
                </li>
                <li>
                    <b>Legend:</b> choose which layer to inherit <span class="section-link" (click)="scrollTo('help_Legend')">legend items</span> from.
                </li>
            </ul>
            <p>
                Tactic-spanning Techniques are evaluated individually: if a technique is annotated differently
                in two tactics, the output layers' techniques will honor this difference.
            </p>
            <p>
                <b>Tip:</b> Score expressions don't need to use variables! You can use
                this to create a new layer with a constant score for each technique. For
                example, if you wanted a new layer where all techniques are scored 50, you
                could simply type 50 into the score expression input.
            </p>

            <h1 id="help_Layer_Controls">Layer Controls</h1>
            <h2 id="help_Layer_Information">
                <img src="assets/icons/ic_description_black_24px.svg">
                Layer Information
            </h2>
            <p>
                    The layer name and description can be edited in the layer information dropdown. The layer name can also be edited where it appears in the tab title.
                    Additionally, the layer information panel allows the user to add metadata to the layer. Metadata can be useful for supporting other applications that use the layer format,
                    or for attaching additional descriptive fields to the layer.
            </p>
            <p>

                <b>Note:</b> techniques can also have metadata, however metadata on techniques is not editable in the Navigator. Metadata on techniques is shown
                in tooltips.
            </p>


            <h2 id="help_Sorting">
                Sorting
            </h2>
            <p>
                There are four modes of sorting. Clicking the sorting button will toggle between the modes.
            </p>

            <ul>
                <li>
                    <img src="assets/icons/ic_sort_alphabetically_ascending_black_24px.svg"/>
                    The table will sort techniques alphabetically by name in ascending order.
                </li>
                <li>
                    <img src="assets/icons/ic_sort_alphabetically_descending_black_24px.svg"/>
                    The table will sort techniques alphabetically by name in descending order.
                </li>
                <li>
                    <img src="assets/icons/ic_sort_numerically_ascending_black_24px.svg"/>
                    The table will sort techniques by their score in ascending order. Techniques with no score are treated as if their score is 0.
                </li>
                <li>
                    <img src="assets/icons/ic_sort_numerically_descending_black_24px.svg"/>
                    The table will sort techniques by their score in descending order. Techniques with no score are treated as if their score is 0.
                </li>
            </ul>



            <h2 id="help_Filtering">
                <img src="assets/icons/ic_filter_list_black_24px.svg"/>
                Filtering
            </h2>
            <p>
                The list of techniques and tactics can be filtered in the filtering menu.
                Filters are additive - the displayed set of techniques is the logical <i>or</i>
                of the techniques of the filters selected.
            </p>
            <h3>Platform Filter</h3>
            <p>
                The platform filter allows the user to control which techniques are
                included in a layer based on whether or not a particular technique
                applies to a particular technology platform.  Technology platforms
                are tied to the specific technology domain you are visualizing. For
                the Enterprise technology domain, the defined platforms are:
                PRE, Windows, Linux, macOS, Network, AWS, GCP, Azure, Azure AD, Office 365, and SaaS.  For the Mobile technology domain, the
                defined platforms are: Android and iOS. For the ICS technology domain, the defined platforms are Windows, Control Server, Data Historian, "Engineering Workstation", Field Controller/RTU/PLC/IED, Human-Machine Interface, Input/Output Server, Safety Instrumented System/Protection Relay.
            </p>
            <p>
                Each technique in an ATT&CK matrix is tied to one or more platforms.
                In the Navigator, if you wanted to see only those techniques in
                Enterprise ATT&CK which applied to the Linux platform, you would
                deselect "Windows" and "macOS" under the platform filter. If later you
                decided to also include techniques known to apply to macOS
                platforms, you could select "macOS" as well and those techniques would
                be added to the visible layer.
            </p>

            <p>
                <b>Tip:</b> Techniques can also be hidden from your view by using the <span class="section-link" (click)="scrollTo('help_Hiding_Disabled_Techniques')">hide disabled techniques</span>
                button. Couple this with the <span class="section-link" (click)="scrollTo('help_Multiselct_Interface')">multiselect interface</span>
                to hide techniques which are contained in specific threat or software groupings.
            </p>

            <h2 id="help_Color_Setup">
                <img src="assets/icons/ic_palette_black_24px.svg"/>
                Color Setup
            </h2>
            <h3 id="help_Tactic_Row_Background">
                Tactic Row Background
            </h3>
            <p>
                The background color of the tactic row can be set in the tactic row background section of the color setup menu. The color
                will only be displayed if the "show" checkbox is selected. The tactic row background will not be shown when in the
                <span class="section-link" (click)="scrollTo('help_Mini_Layout')">mini view</span>.
            </p>


            <h3 id="help_Scoring_Gradient">Scoring Gradient</h3>
            <p>
                Techniques which are assigned a score will be colored according to a
                gradient defined in the scoring gradient section in the color setup menu. Technique scores are
                mapped to a color scaled linearly between the "low value" and "high value"
                inputs. For example, on a red-green scale, if "low value" were set to 0 and
                "high value" were set to 50, a score of 25 would fall on yellow -- exactly
                halfway between red and green. Scores below the low value are colored as if
                they have the low value, and scores above the high value are colored as if
                they have the high value.
            </p>
            <p>
                Several preset gradients are present within the preset dropdown. If no preset
                matches your desired gradient, you can create your own by adding and removing
                colors using the interface.
            </p>
            <p>
                <b>Tip:</b> If your scores are binary (0 or 1), consider setting the low
                value of 0 to white and the high of 1 to some other
                color to only color the techniques which have the value of 1.
            </p>

            <h2 id="help_Hiding_Disabled_Techniques">
                <img src="assets/icons/ic_visibility_off_black_24px.svg">
                Hiding Disabled Techniques
            </h2>
            <p>
                Techniques that are <span class="section-link" (click)="scrollTo('help_Disabling_Techniques')">disabled</span> can be hidden by toggling the "hide disabled techniques" button.
                Hidden techniques are still present in the data when saved and can still be annotated, but won't be visible in the view.
            </p>
            <p>
                <b>Tip:</b> This button has powerful synergy with the
                <span class="section-link" (click)="scrollTo('help_Multiselct_Interface')">multiselect interface</span>. Use the
                multiselect interface to select techniques which match your criteria,
                disable them, and then turn on hiding disabled techniques to remove entire
                groups of techniques from your view.
            </p>

            <h2 id="help_Show_Hide_Subtechniques">
                Showing or Hiding Sub-techniques
            </h2>
            <p>
                Sub-techniques in the view are nested under their parent technique and are hidden by default.
            </p>
            <ul>
                <li>
                    <img alt="expand icon" src="assets/icons/unfold_more_black_24px.svg">
                    All sub-techniques can be shown by clicking the "expand sub-techniques" button.
                </li>
                <li>
                    <img alt="expand annotated icon" src="assets/icons/unfold_more_alt_black_24px.svg">
                    All annotated sub-techniques can be shown by clicking the "expand annotated sub-techniques" button.
                </li>
                <li>
                    <img alt="collapse icon" src="assets/icons/unfold_less_black_24px.svg">
                    All sub-techniques can be hidden by clicking the "collapse sub-techniques" button.
                </li>
            </ul>
            <p>
                <b>Tip:</b> Sub-techniques can also be shown or hidden on each individual
                technique when in the <span class="section-link" (click)="scrollTo('help_Side_Layout')">side layout</span> or
                <span class="section-link" (click)="scrollTo('help_Flat_Layout')">flat layout</span> by clicking the gray sidebar on the
                technique cell.
            </p>

            <h2 id="help_Changing_Layout">
                <img src="assets/icons/ic_view_large_black_24px.svg">
                Configuring the layout
            </h2>
            <p>
                The ATT&CK Navigator has controls for how the ATT&CK Matrices are displayed. Access controls to change layout via the "Matrix Configuration" dropdown menu.
            </p>
            <h3 id="help_Side_Layout">
                Side Layout
            </h3>
            <p>
                The side layout displays sub-techniques adjacent to their parent techniques. Techniques with sub-techniques are denoted by the presence of a right-positioned sidebar which can be clicked to show sub-techniques. Sub-techniques are differentiated from techniques by position in the tactic column.
            </p>
            <h3 id="help_Flat_Layout">
                Flat Layout
            </h3>
            <p>
                The flat layout displays subtechniques in-line with the techniques. Techniques with subtechniques are denoted by the presence of a left-positioned sidebar which can be clicked to show subtechniques. Subtechniques are differentiated from techniques by indentation.
            </p>

            <h3 id="help_Mini_Layout">
                Mini Layout
            </h3>
            <p>
                The mini layout is designed to fit more techniques on the screen
                simultaneously by reducing their size. To do so all text is removed
                and techniques are visualized as squares under the tactic. Selecting this layout disables
                <span class="section-link" (click)="scrollTo('help_IDs_Names')">the "show IDs" and "show Names" controls</span>.

                Tactic headers are visualized as black cells above the columns. Technique
                and tactic names are displayed as tooltips when you hover over a
                technique or tactic-header cell.

                Techniques and their sub-techniques are grouped inside of an outlined box. The technique is the dark-outlined first cell of the group, and the rest of the cells of the group are the sub-techniques.

                Techniques without sub-techniques are displayed without a grouping box, and may appear inline with other sub-techniques-less techniques.

                Disabled techniques are denoted with an "x" symbol. Techniques with comments are denoted with an "i" symbol.
            </p>
            <h3 id="help_IDs_Names">
                Showing IDs and Names
            </h3>
            <p>
                In the side and flat layouts, you can change what is shown inside of the technique cells. Enabling "show names" (enabled by default) will show technique and tactic names on each cell of the matrix. Enabling "show IDs" (disabled by default) will show ATT&CK IDs (e.g "T1000" for techniques, or "TA1000" for tactics) on each cell of the matrix.

                These controls can be toggled independently and turned off entirely to remove cell labels entirely. The mini
                layout forces both of these controls to be disabled.
            </p>
            <h2 id="help_Aggregate_Scores">
                Aggregate Scores
            </h2>
            <p>
                Aggregate scores will combine the scores of a technique and all of its sub-techniques, and can be calculated
                using either the average, max, min or sum function.
                They will display only on techniques with sub-techniques. The display of aggregate scores in the matrix view
                and the score calculations can be customized via the "Matrix Configuration" dropdown menu.
            </p>
            <h3 id="help_Show_Hide_Aggregate">
                Showing or Hiding Aggregate Scores
            </h3>
            <p>
                Aggregate scores in the view are displayed in the tooltip when hovering over a technique, and are hidden by
                default. When this is enabled, the technique's background color will be calculated using the aggregate score
                by default.
            </p>
            <h3 id="help_Count_Unscored">
                Counting Unscored Techniques
            </h3>
            <p>
                By default, techniques which are unscored are not included in aggregate score computations. Enabling
                "count unscored techniques as 0" will make unscored techniques count as if their scores were 0 when
                computing an aggregate score.
            </p>
            <h3 id="help_Choose_Aggregate">
                Choosing an Aggregate Function
            </h3>
            <p>
                There are 4 available functions to calculate the aggregate score: average, min, max, and sum.
            </p>
            <ul>
            <li>Average:
                <ul>
                    <li>
                        if including unscored techniques, will add up the scores of a technique and all of its
                        sub-techniques, and divide by all; if not including unscored techniques, will add up the only
                        the nonzero scores of a technique and its sub-techniques, and divide by the count of non-zero
                        scores.
                    </li>
                </ul>
            </li>
            <li>Min:
                <ul>
                    <li>
                      will take the minimum of the scores of a technique and all of its sub-techniques.
                    </li>
                </ul>
            </li>
            <li>Max:
                <ul>
                    <li>will take the maximum of the scores of a technique and all of its sub-techniques.</li>
                </ul>
            </li>
            <li>Sum:
                <ul>
                    <li>will add the scores of a technique and all of its sub-techniques.</li>
                </ul>
            </li>
        </ul>
        <h2 id="help_Legend">
            Legend
        </h2>
        <p>
            The legend helps associate meanings with colors displayed by customized techniques in the ATT&CK Navigator.
            To open the legend, click on the bar labled "legend" in the bottom-right corner of the screen. Click on the
            same bar to close the legend. To add an item to the legend, click the "Add Item"
            button. To clear all items in the legend, click "Clear".
            <br/><br/>
            An item's color can be changed by either clicking in the color field and typing a hex color value, or by
            clicking in the field and choosing a color from the color picker. Click and type in the
            text field to change the item's label. To remove an item, click on the (<img
            src="assets/icons/ic_clear_gray_24px.svg"/>) button on the right side. Legend items are saved to the layer
            file and will be
            loaded when a layer with saved legend items is loaded.
        </p>

            <h1 id="help_Technique_Controls">Technique Controls</h1>
            <p>
                Techniques in the layer can be annotated. The technique controls on the menubar
                are only enabled when one or more techniques are <span class="section-link" (click)="scrollTo('help_Selecting_Techniques')">selected</span>.
                If multiple techniques are selected, they will all be annotated simultaneously.
            </p>



            <h2 id="help_Disabling_Techniques">
                <img src="assets/icons/ic_texture_black_24px.svg">
                Disabling Techniques
            </h2>
            <p>
                Clicking the "toggle state" button toggles selected techniques between an
                enabled and disabled state. In the disabled state, the technique text is greyed
                out and no colors (<span class="section-link" (click)="scrollTo('help_Assigning_Manual_Colors')">assigned manually</span> or via
                <span class="section-link" (click)="scrollTo('help_Scoring_Techniques')">score</span>) will be displayed.
            </p>
            <p>
                The <span class="section-link" (click)="scrollTo('help_Hiding_Disabled_Techniques')">hide disabled techniques</span>
                button can be used to hide disabled techniques from the view.
            </p>

            <h2 id="help_Assigning_Manual_Colors">
                <img src="assets/icons/ic_format_color_fill_black_24px.svg">
                Assigning Manual Colors
            </h2>
            <p>
                Techniques can be assigned colors manually. Manually assigned colors supersede
                colors created by score. To remove a manually assigned color, select the "no color"
                box at the top of the interface.
            </p>

            <h2 id="help_Scoring_Techniques">
                <img src="assets/icons/ic_insert_chart_black_24px.svg">
                Scoring Techniques
            </h2>
            <p>
                A score is a numeric value assigned to a technique. The meaning or
                interpretation of scores is completely up to the user user - the
                Navigator simply visualizes the matrix based on any scores you have
                assigned. Some possible uses of scores include:
            </p>
            <ul>
                <li>
                    Assigning a score to techniques based on whether or not a given
                    adversary group has been observed to use that technique.
                </li>
                <li>
                    Assigning a score to techniques based on your organization's
                    ability to detect, prevent and/or mitigate the use of a
                    particular technique.
                </li>
                <li>
                    Assigning a score to those techniques that a red-team has
                    successfully employed during an exercise.
                </li>
            </ul>
            <p>
                By default, techniques are "unscored" meaning that no score has been
                assigned to the technique.  Note that "unscored" and a score of zero
                are not the same, specifically with respect to automatically
                assigned colors. Scores show up in technique tooltips if a score has
                been assigned. To change a technique with a numeric score to
                unscored, select the technique and delete the score value in the score
                control. The technique will revert to unscored.
            </p>
            <p>
                Techniques are automatically assigned a color according to its
                score. This color is determined according to the <span class="section-link" (click)="scrollTo('help_Scoring_Gradient')">scoring gradient setup interface</span>. Colors
                assigned <span class="section-link" (click)="scrollTo('help_Assigning_Manual_Colors')">manually</span>
                supersede the score-generated color. It is a good idea to assign
                techniques scores inside of a predetermined range, such as 0-1 or 0-100. Set
                the "high value" and "low value" inputs in the <span class="section-link" (click)="scrollTo('help_Scoring_Gradient')">scoring gradient setup interface</span> to this
                range to make sure that the color for the score is properly mapped
                to the gradient. Techniques that are unscored are not assigned a
                color based on the gradient - they are displayed with a white
                background in the matrix.
            </p>

            <h2 id="help_Adding_Comments_to_Techniques">
                <img src="assets/icons/ic_insert_comment_black_24px.svg">
                Adding Comments to Techniques
            </h2>
            <p>
                A text comment can be added to techniques. This comment will show up in the technique tooltip if a comment has been added.
                Techniques with a comment will be given a yellow underline.
            </p>
            <p>
                <b>Note:</b> A yellow underline is also shown if the technique has attached <a href="https://docs.oasis-open.org/cti/stix/v2.1/cs01/stix-v2.1-cs01.html#_gudodcg1sbb9">Notes</a> in the source data. Notes cannot be edited in the Navigator and are displayed in the tooltip.
            </p>
            <h2 id="help_Clearing_Selected_Techniques_Annotations">
                <img src="assets/icons/ic_clear_black_24px.svg">
                Clearing Annotations on Techniques
            </h2>
            <p>
                Clicking the "clear annotations on selected" button removes comments,
                colors, scores, and enabled/disabled state from all selected techniques.
            </p>

            <h1 id="help_Selecting_Techniques">Selecting Techniques</h1>

            <p>
                In order to be annotated, techniques must first be selected. There are multiple ways
                to select techniques.
            </p>
            <h2 id="help_Selecting_with_the_Mouse">Selecting with the Mouse</h2>
            <p>
                Techniques can be selected using the mouse. Left click a technique to select
                it. Pressing control (windows) command (mac) or shift (both) while left-clicking a technique will add it to or remove it from the selection. Right
                clicking a technique will bring up a context menu with more options:
            </p>
            <ul>
                <li><b>select:</b> Select only this technique.</li>
                <li><b>add to selection:</b> Add this technique to the selection.</li>
                <li><b>remove from selection:</b> Remove this technique from the selection.</li>
                <li><b>invert selection:</b> Select all techniques that are not currently selected and unselect all techniques that are currently selected.</li>
                <li><b>select all:</b> Select all techniques.</li>
                <li><b>deselect all:</b> Deselect all techniques. This action can also be completed by the "deselect" (<img src="assets/icons/ic_clear_black_24px.svg"/>) button.</li>
                <li><b>select annotated:</b> Select all techniques and sub-techniques which have annotations or remove unnanotated techniques from an existing selection.</li>
                <li><b>select unannotated:</b> Select all techniques and sub-techniques which do not have annotations or remove annotated techniques from an existing selection.</li>
                <li><b>select all techniques in tactic:</b> Select all techniques in this tactic. This action can also be completed by clicking on the tactic header and follows the behavior preference under <span class="section-link" (click)="scrollTo('help_Selection_Behavior')">selection behavior</span> in the selection controls.
                    If the “select techniques across tactics” control is enabled, the selection will include instances of techniques that are in other tactics. Disable this control to select only the instances of techniques that are within this tactic. Sub-techniques within the tactic can be selected along with their parent technique by enabling the “select sub-techniques with parent” control. </li>
                <li><b>deselect all techniques in tactic:</b> Deselect all techniques in this tactic. This action follows the behavior preference under <span class="section-link" (click)="scrollTo('help_Selection_Behavior')">selection behavior</span> in the selection controls.
                    If the “select techniques across tactics” control is enabled, instances of techniques across all tactics will be deselected. Disable this control to remove only the instances of techniques within this tactic from the selection. Sub-techniques in this tactic will be deselected with their parent technique if the “select sub-techniques with parent” control is enabled. Note that currently selected sub-techniques will remain selected if the control is disabled when using this option.</li>
                <li><b>view technique:</b> For more information / details on the technique.</li>
                <li><b>view tactic:</b> For more information / details on the tactic.</li>
            </ul>
            <p><b>Tip:</b> You can use "select unannotated" followed by disabling those techniques, and then hiding disabled techniques,
                to create a layer where only annotated techniques are visible.
            </p>

            <h2 id="help_Selection_Behavior">
                <img src="assets/icons/ic_lock_black_24px.svg">
                Selection Behavior
            </h2>
            <p>
                The selection behavior controls affect how sub-techniques are selected with regards to tactics and sub-techniques.
            </p>
            <ul>
                <li><b>Select techniques across tactics</b> toggles whether selecting a technique that is found in multiple tactics selects it in all tactics, or just the one wherein it was clicked.</li>
                <li><b>Select sub-techniques with parent</b> toggles whether sub-techniques are selected alongside their parents, and vice versa. When enabled, clicking on a technique will also select all of the sub-techniques of that technique. In addition,clicking a sub-technique will also select the parent as well as all sibling sub-techniques. When disabled, sub-techniques are selected independantly of parents and siblings.</li>
            </ul>

            <h2 id="help_Search_Interface">
                <img src="assets/icons/ic_search_black_24px.svg">
                Search Interface
            </h2>
            <p>
                The search interface provides a text input to search through techniques in the matrix.
                Toggles in the interface allow for searching of specific technique fields (name, ID, and description).
            </p>
            <p>
                The interface provides
                buttons to select and deselect techniques. These buttons modify the currently selected techniques rather
                than replacing then, allowing for the selection of the multiple techniques by selecting them in sequence.
                There are 'view' links that lead to more info on each technique.
            </p>
            <p>
                Buttons labelled 'select all' and 'deselect all' are provided to quickly select/deselect all techniques in the results
                area.
            </p>

            <h2 id="help_Multiselct_Interface">
                <img src="assets/icons/ic_playlist_add_black_24px.svg">
                Multiselect Interface
            </h2>
            <p>
                The multiselect interface provides a way to quickly select and deselect
                groups of techniques. The interface provides two types of groupings, threat
                groups and software. Threat groups constitute related intrusion activity
                tracked by a common name. Software constitutes software, malware
                or utilities that use known techniques for intrusion.
            </p>
            <p>
                The interface provides
                buttons to select and deselect techniques associated with each software or
                threat group. These buttons modify the currently selected techniques rather
                than replacing then, allowing for the selection of the techniques of multiple
                threat groups or software by selecting them in sequence.
            </p>
            <p>
                Threat groups and software in the list are given a gray background when all
                of their techniques are selected, even if the selection was not made using
                the multiselect interface.
            </p>

            <h1 id="help_Customizing_The_Navigator">Customizing The Navigator</h1>
            <p>
                The ATT&CK Navigator can be customized by modifying the fragment (e.g <code>example.com<b>#fragment</b></code>) of the URL.
                A panel on the new tab page exists to build a properly formatted ATT&CK Navigator URL
                such that, when opened, it will create an ATT&CK Navigator instance with the desired
                customizations. This feature may be useful for sharing or embedding the ATT&CK Navigator.
            </p>


            <h2 id="help_Default_Layers">Default Layers</h2>
            <p>
                Click the "add a layer link" button, then enter a default layer URL pointing to a layer hosted on the web.
                This will cause the customized ATT&CK Navigator to initialize with this layer open by default.
                This is especially useful for embedding or sharing specific layers.
            </p>
            <p>
                You can click the "add another layer link" button to specify additional default layers, or click the "x" button next to a layer link you've already added to remove it.
            </p>
            <p>
                The following is an example ATT&CK Navigator URL with the default layer specified to be the *Bear APTs layer from <a href="https://github.com/mitre-attack/attack-navigator">our github repo</a>: <br /><code>https://mitre-attack.github.io/attack-navigator/enterprise/<b>#layerURL=https%3A%2F%2Fraw.githubusercontent.com%2Fmitre%2Fattack-navigator%2Fmaster%2Flayers%2Fdata%2Fsamples%2FBear_APT.json</b></code>
            </p>


            <h2 id="help_Disable_Features">Disabling Features</h2>
            <p>
                Individual ATT&CK Navigator features can be disabled with the checkboxes. Removing
                a feature only removes the interface elements of the feature -- opened
                layers utilizing those features will still have them present. For example,
                even if comments are disabled layers with comments present will still display
                them visually and in tooltips.
            </p>
            <p>
                If you are hosting your own navigator instance, you can also disable
                features by editing the configuration file <code>assets/config.json</code>.
            </p>
            <p>
                The following is an example ATT&CK Navigator URL with the ability to download the layer and add comments disabled: <br /><code>https://mitre-attack.github.io/attack-navigator/enterprise/<b>#download_layer=false&comments=false</b></code>
            </p>

            <h1 id="help_Rendering_Layers_As_SVG">
                <img src="assets/icons/ic_camera_alt_black_24px.svg">
                Rendering Layers as SVG
            </h1>
            <p>
                Clicking the "render layer to SVG" button will open a pop-up window allowing the current layer
                to be rendered to an SVG image. Clicking the <i>download svg</i> button (<img src="assets/icons/ic_file_download_black_24px.svg">)
                will download the image, as displayed, in SVG format.
            </p>
            <p>
                <b>Note:</b> this feature has minor compatibility warnings
                with the Internet Explorer browser. For best results, please use Firefox, Chrome or Edge.
            </p>
            <p>
                The Microsoft Edge browser has a bug where the downloaded SVG
                will have the <code>.txt</code> extension. Renaming the extension to <code>.svg</code> will
                restore it as a valid svg file.
            </p>

            <h2 id="help_exporting_units">Measurement Units</h2>
            <p>
                Clicking the "toggle measurement unit" button will toggle between
                measuring in inches (in), centimeters (cm), and pixels (px). This unit
                applies to controls for image size and legend position.
            </p>

            <h2 id="help_exporting_image_size">
                <img src="assets/icons/ic_photo_size_select_large_black_24px.svg">
                Configuring Image Size
            </h2>
            <p>
                The image size controls allow you to specify the width and height of
                the image, as well as the height of the header if one is present.
                The measurements are in units specified by the <span class="section-link" (click)="scrollTo('help_exporting_units')">measurement units</span> control.
            </p>
            <p>
                The header height contributes to the total image height: if you have specified
                the image height to be 8.5 inches and the header height to be 1 inch,
                the technique table will be 7.5 inches and the header 1 inch for a total height of 8.5 inches.
                If the header is disabled this control will not be editable.
            </p>
            <h2 id="help_exporting_text">
                <img src="assets/icons/ic_format_size_black_24px.svg">
                Configuring Text
            </h2>
            <p>
                The text configuration dropdown allows for the configuration of the font
                (serif, sans-serif, and monospace) of the exported render.
            </p>
            <p>
                Unlike in previous versions of the Navigator, in ATT&CK Navigator Version {{nav_version}} text size is automatically
                calculated to optimize readability.
            </p>
            <h2 id="help_exporting_legend_config">
                <img src="assets/icons/ic_view_list_black_24px.svg">
                Customizing the Legend
            </h2>
            <p>
                This menu can only be opened if a <span class="section-link" (click)="scrollTo('help_Legend')">legend</span> is present on the layer or if techniques have been assigned scores.
                The checkbox allows you to undock the legend from the SVG header.
                Once undocked, the X and Y position controls can be used to position
                the legend in the image. The width and height inputs control
                the size of the legend when it is undocked. The measurements are in units specified by the <span class="section-link" (click)="scrollTo('help_exporting_units')">measurement units</span> control.
            </p>

            <h2 id="help_exporting_display_settings">
                <img src="assets/icons/ic_visibility_black_24px.svg">
                Display Settings
            </h2>
            <p>
                The header itself, or specific parts of the header, can be hidden
                using the controls in this dropdown. The color of table cell borders
                can also be edited.
            </p>
            <ul>
                <li>
                    <b>Show header</b> controls whether the header is shown at all. If
                    the legend is undocked from the header it will still be shown.
                </li>
                <li>
                    <b>Show about</b> controls whether the about (layer name and description) section of the header is visible. If the layer has no name nor description, the control will be disabled and the section automatically hidden.
                </li>
                <li>
                    <b>Show domain</b> controls whether the domain (layer domain and version) section is visible in the header. This control will be disabled if the header is hidden in entirety.
                </li>
                <li>
                    <b>Show filters</b> controls whether the current filters (selected platforms) are visible in
                    the header. This control will be disabled if the header is hidden in entirety.
                </li>
                <li>
                    <b>Show legend</b> controls whether the layer legend is visible.
                    If the layer has no defined legend items or no scores, the control will be disabled and the legend will be automatically hidden.
                </li>
                <li>
                    The <b>sub-techniques</b> dropdown controls the visibility of sub-techniques in the rendered layer.
                    Selecting "show all" will show all sub-techniques, "show expanded" will show sub-techniques whose parent techniques were expanded when the render button was clicked, and "show none" will show no sub-techniques.
                </li>
                <li>
                    <b>Cell border</b> controls the border of cells in the body of the table.
                    The borders in the header are not modified by this control. Note that you must click "apply" in the color picker
                    for your change to take effect.
                </li>
            </ul>

            <h1 id="help_Rendering_Layers_As_XLSX">
                <img src="assets/icons/baseline-grid_on-24px.svg">
                Exporting layers to MS Excel
            </h1>
            <p>
                Layers can be exported to MS excel (.xlsx) format. Clicking on the "export to excel" button in the toolbar will download an .xlsx
                file which contains the current layer. This layer contains the annotations from the view --
                color (via score or manually assigned) and disabled states. The exporter also honors tactic header background, sorting, filtering and hidden techniques.
            </p>

            <h1 id="notice">Notice</h1>
            <p>Copyright 2020 The MITRE Corporation</p>
            <p>Approved for Public Release; Distribution Unlimited. Case Number 18-0128.</p>
            <p>
                Licensed under the Apache License, Version 2.0 (the "License"); you may not
                use this file except in compliance with the License. You may obtain a copy
                of the License at
            </p>
            <ul style="list-style: none">
                <li>http://www.apache.org/licenses/LICENSE-2.0</li>
            </ul>

            <p>
                Unless required by applicable law or agreed to in writing, software
                distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
                WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
                License for the specific language governing permissions and limitations
                under the License.
            </p>

            <p>This project makes use of ATT&CK&reg;</p>
            <a href="https://attack.mitre.org/resources/terms-of-use/">ATT&CK&reg; Terms of Use</a>
    </div>
    <div class="close-button">
        <button mat-button mat-dialog-close>close</button>
    </div>
</div>
